<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#big{
				width: 800px;
				height: 800px;
				border: 1px solid black;
				position: relative;
			}
			#samll{
				width: 100px;
				height: 100px;
				background-color: gray;
				position: absolute;
				border-radius: 50%;
			}
			#samll2{
				width: 100px;
				height: 100px;
				background-color: red;;
				position: absolute;
				top: 300px;
				left: 300px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="big">
			<div id="samll">samll</div>
			<div id="samll2">samll2</div>
		</div>		
			
		
	</body>
	<script type="text/javascript">
		var big = document.getElementById('big');
		var samll = document.getElementById('samll');
		var samll2 = document.getElementById('samll2');
		
		
		samll.onmousedown = function(event){
			var x = event.clientX - samll.offsetLeft;
			var y = event.clientY - samll.offsetTop;
			
			document.onmousemove = function(event){
				var _x = event.clientX;
				var _y = event.clientY;
				
				
				samll.style.left = _x - x + "px";
				samll.style.top = _y - y + "px";
				
				
				if((samll.offsetLeft + samll.offsetWidth) 
				>=samll2.offsetLeft 
				&&(samll2.offsetLeft + samll2.offsetWidth)
				>= samll.offsetLeft
				&&(samll.offsetTop + samll.offsetHeight )
				>=samll2.offsetTop 
				&&(samll2.offsetTop + samll2.offsetHeight) 
				>= samll.offsetTop)
				{
					samll2.style.backgroundColor = 'yellow';
				}else{
					samll2.style.backgroundColor = 'red';
				}
				
			}
			}
			document.onmouseup = function(){
				document.onmousemove = "";
			}
			
		
		
		
		
	</script>
</html>
